<template>
	<div>
		<div class="header">
			<input type="text" v-model="keyword" placeholder="搜索联系人">
		</div>
		<div class="contacts-list">
			<ul>
				<li v-for="contact in filteredContacts" :key="contact.id" @click="addToChat(contact)">
					<image :src="contact.img" mode="aspectFill" class="avatar"></image>
					<!-- <div class="avatar">{{ contact.name[0] }}</div> -->
					<div class="info">
						<div class="name">{{ contact.name }}</div>
						<div class="message">{{ contact.message }}</div>
					</div>
					<div class="time">{{ contact.time }}</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import {
		createRouter,
		createWebHistory
	} from 'vue-router'
	import {
		onMounted,
		getCurrentInstance
	} from 'vue';

	/* const router = createTouter({
		history: createWebHistory(import.meta.env.BASE_URL),
		routes: [
			{
				path: '/',
				name: 'person',
				component: () => import('')
			}
		]
	}) */
	export default {
		// setup() {

		// 	return {
		// 		addToChataddToChat
		// 	}
		// },
		data() {
			return {
				keyword: '',
				chatContacts: [],
				// addToChataddToChat:'',
				contacts: [{
						id: 1,
						name: '张三',
						username: 'zhangsna',
						avatar: '/static/img/avatar/avatar1.jpg',
						message: '你好',
						address: '北京',
						time: '12:30'
					},
					{
						id: 2,
						name: '李四',
						username: 'lisi',
						avatar: '/static/img/avatar/avatar1.jpg',
						message: '在吗',
						address: '北京',
						time: '13:45'
					},
					{
						id: 3,
						name: '王五',
						username: 'wnagwu',
						avatar: '/static/img/avatar/avatar1.jpg',
						message: '有新的消息',
						address: '北京',
						time: '15:20'
					},
					{
						id: 4,
						name: '赵六',
						username: 'zhaoliu',
						avatar: '/static/img/avatar/avatar1.jpg',
						message: '明天见',
						address: '北京',
						time: '17:10'
					},
					{
						id: 5,
						name: '李四',
						username: 'lisi',
						avatar: '/static/img/avatar/avatar1.jpg',
						message: '在吗',
						address: '北京',
						time: '13:45'
					},
					{
						id: 6,
						name: '王五',
						username: 'wangwu',
						avatar: '/static/img/avatar/avatar1.jpg',
						message: '有新的消息',
						address: '北京',
						time: '15:20'
					},
					{
						id: 7,
						name: '赵六',
						username: 'zhaoliu',
						avatar: '/static/img/avatar/avatar1.jpg',
						message: '明天见',
						address: '北京',
						time: '17:10'
					},
					{
						id: 8,
						username: 'aquan',
						avatar: '/static/img/avatar/avatar1.jpg',
						name: '阿权',
						address: '北京',
						message: '吃了吗',
						time: "15:31"
					},
					{
						id: 9,
						avatar: '/static/img/avatar/avatar1.jpg',
						name: '磨合',
						username: 'mohe',
						address: '北京',
						message: '吃了吗',
						time: "15:31"
					},
					{
						id: 10,
						avatar: '/static/img/avatar/avatar1.jpg',
						name: '驾鹤西去',
						username: 'jiahexiqu',
						message: '吃了吗',
						address: '北京',
						time: "15:31"
					},
					{
						id: 11,
						avatar: '/static/img/avatar/avatar1.jpg',
						name: '张四',
						username: 'zhangsi',
						message: '吃了吗',
						address: '北京',
						time: "15:31"
					},
					{
						id: 12,
						avatar: '/static/img/avatar/avatar1.jpg',
						name: '张三丰',
						username: 'zhangsanfeng',
						message: '吃了吗',
						address: '北京',
						time: "15:31"
					}
				]
			}
			/* ,
						chatContacts: [] */
		},
		computed: {
			filteredContacts() {
				return this.contacts.filter(contact => {
					return contact.name.toLowerCase().includes(this.keyword.toLowerCase());
				});
			}
		},
		methods: {
			/* addToChat(contact) {
				if (!this.chatContacts.includes(contact)) {
					this.chatContacts.push(contact);
					uni.navigateTo({
						url: 'wx/tabbar2/businessCard?data=' + JSON.stringify(contact),
					})
				}
				uni.navigateTo({
					url: 'wx/tabbar2/businessCard?data=' + JSON.stringify(contact),
				})
			} */
			addToChat(cntact) {
				/* onMounted(() => {
						const instance = getCurrentInstance().proxy
						const eventChannel = instance.getOpenerEventChannel();

						eventChannel.emit('cntact', {
							data: cntact
						});

						eventChannel.on('acceptDataFromOpenerPage', function(data) {
							console.log('acceptDataFromOpenerPage', data)
						})
					} */
					/* console.log('参数', contact);
					this.$store.commit('SET_USER', contact) */
					uni.navigateTo({
						url: `/wx/tabbar2/businessCard/index`
					})
				}
			}
		}
</script>

<style scoped>
	.header {
		padding: 10px;
		background-color: #f5f5f5;
	}

	.header input {
		width: 100%;
		padding: 5px 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}

	.contacts-list {
		margin-top: 20px;
	}

	.contacts-list ul {
		list-style-type: none;
		padding: 0;
	}

	.contacts-list li {
		display: flex;
		align-items: center;
		padding: 10px;
		border-bottom: 1px solid #ccc;
	}

	.avatar {
		width: 40px;
		height: 40px;
		background-color: #ccc;
		border-radius: 50%;
		text-align: center;
		line-height: 40px;
		margin-right: 10px;
		font-size: 20px;
		color: #fff;
	}

	.info {
		flex-grow: 1;
	}

	.name {
		font-size: 16px;
		font-weight: bold;
	}

	.message {
		font-size: 14px;
		color: #999;
	}

	.time {
		font-size: 14px;
		color: #999;
	}
</style>